<template>
<div class="guide">
  <div class="content">
    <header>
      <slot name="head"></slot>
    </header>
    <main>
      <slot name="middle"></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</div>
</template>
<style lang="scss" scoped>
.guide {
  background-image: var(--baclgroung-image-url);
  background-repeat: no-repeat;
  background-size: cover;
  .content {
    display: flex;
    width: 100vw;
    height: 100vh;
    padding: 12px 12px 0 12px;
    flex-direction: column;
    align-items: center;
    background-color: var(--guide-bg-color);
    header,main,footer {
      width: 100%;
    }
    header {
      height: 10vh;
      display: flex;
      justify-content: center;
    }
    main {
      height: 70vh;
      display: flex;
      align-items: center;
    }
    footer {
      height: 20vh;
    }
  }
}
</style>
